import React, { useEffect, useState } from 'react';
import { Button, Tag, Card, Descriptions} from 'antd';
import PageHeader from '../../../components/PageHeader';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import dayjs from 'dayjs';
import { useNavigate } from 'react-router-dom';

const NewsPreview = () => {
  const {username} = JSON.parse(localStorage.getItem("token"));
  const navigate=useNavigate()
  const [newsData, setNewsData] = useState({});
  const { id } = useParams(); // 将 useParams 移到组件顶层
  console.log(id);
  useEffect(()=>{
    axios.get(`http://localhost:3000/news/${id}?_expand=category&_expand=role`).then(res=>{
      setNewsData(res.data)
    })
  },[id]) // 添加 id 作为依赖项
  
  const handleBack = () => {
    console.log('返回按钮被点击');
    window.history.back()
    // 您的返回逻辑
  };

  const handleEdit = () => {
    console.log('编辑按钮被点击');
    // 您的编辑逻辑
    navigate(`/news-manage/update/${id}`)
  };

  const getStatusTag = (auditState, publishState) => {
    if (auditState === 0 || auditState===1) {
      return <Tag color="orange">未审核</Tag>;
    } else if (auditState === 2) {
      if (publishState === 0) {
        return <Tag color="green">审核通过</Tag>;
      } else if (publishState === 2) {
        return <Tag color="cyan">已发布</Tag>;
      } else if(publishState===3){
        return <Tag color="red">已下线</Tag>;
      }else{
        return <Tag color="orange">待发布</Tag>;
      }
    } else {
      return <Tag color="red">审核不通过</Tag>;
    }
  };
 
  return (
   <div>
    {
      // 用来解决数据请求延迟导致数据为空
      newsData&& 
      <div style={{ padding: '20px', background: '#f5f5f5', minHeight: '100vh' }}>
        <Card>
           <PageHeader
              onBack={handleBack}
              title="新闻预览"
              subTitle={newsData.title}//解决数据请求延迟导致数据为空
              extra={[ 
               <Button key="edit" type="primary" onClick={handleEdit}
                disabled={ username != newsData.author}
                >
                  编辑
                </Button>
              ,
              ]}
          />

            <div style={{ padding: '0 24px' }}>
              <Descriptions bordered column={3} style={{ marginBottom: '24px' }}>
                <Descriptions.Item label="标题" span={3}>
                  {newsData.title}
                </Descriptions.Item>
                <Descriptions.Item label="分类">
                  {newsData.category?.title || '未分类'}
                </Descriptions.Item>
                <Descriptions.Item label="作者">
                  {newsData.author}
                </Descriptions.Item>
                <Descriptions.Item label="区域">
                  {newsData.region}
                </Descriptions.Item>
                <Descriptions.Item label="审核状态">
                  {getStatusTag(newsData.auditState, newsData.publishState)}
                </Descriptions.Item>
                <Descriptions.Item label="发布时间">
                  {
                  newsData.publishTime? dayjs(newsData.publishTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                  }
                </Descriptions.Item>
                <Descriptions.Item label="创建时间">
                  {
                    //记住dayjs的格式化方法
                    newsData.createTime ? dayjs(newsData.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                  }
                </Descriptions.Item>
                <Descriptions.Item label="访问数量">
                  {newsData.view || 0}
                </Descriptions.Item>
                <Descriptions.Item label="点赞数量">
                  {newsData.star || 0}
                </Descriptions.Item>
                <Descriptions.Item label="评论数量">
                  0
                </Descriptions.Item>
              </Descriptions>

              <Card title="新闻内容" style={{ marginTop: '24px' }}>
                <div 
                  style={{ 
                    minHeight: '300px',
                    lineHeight: '1.6',
                    fontSize: '16px'
                  }}
                  // 防止xss攻击 所以jsx默认的{}不支持dom解析
                  // 添加dangerouslySetInnerHTML属性 可以解析dom元素
                  dangerouslySetInnerHTML={{ __html: newsData.content }}
                />
              </Card>
            </div>
        </Card>
      </div>
    }
   </div>
  );
};

export default NewsPreview;


/* 
  我直接忘本
*/


